<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>家族カード申込情報のご入力</title>
  <link rel="stylesheet" href="/css/all.css">
</head>
<body>
<!-- 页面头部导航 -->
<div class="header">
  <div>
    <a href="#">カードサイト</a>
    <a href="#">お手続き</a>
    <a href="#">お問い合わせ</a>
    <a href="#">加盟店のお客様</a>
  </div>
</div>

<hr>
<!-- 页面主标题 -->
<div class="title-bar container0">家族カード申込情報のご入力</div>
<div class="container">
  <hr>

  <!-- 表单开始：提交到 /apply/family1 的 POST 请求 -->
  <form action="/apply/tofamily2" method="post">
    <!-- 家族成员信息 -->
    <div class="section-title"><strong>ご家族について</strong></div>
    <div class="form-container">

      <!-- 家族姓名 -->
      <div class="form-group">
        <div class="label">家族お名前 <span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <div class="name-fields">
            <div class="field-row">
              <label for="familyLastName" class="field-label">姓</label>
              <span th:text="${app.kzkseikj}" id="familyLastName">山田</span>
            </div>
            <div class="field-row">
              <label for="familyFirstName" class="field-label">名</label>
              <span th:text="${app.kzkmeikj}" id="familyFirstName">花子</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 家族姓名（平假名） -->
      <div class="form-group">
        <div class="label">家族お名前<br>フリガナ <span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <div class="name-fields">
            <div class="field-row">
              <label for="familyLastNameKana" class="field-label">姓</label>
              <span th:text="${app.kzkseien}" id="familyLastNameKana">ヤマダ</span>
            </div>
            <div class="field-row">
              <label for="familyFirstNameKana" class="field-label">名</label>
              <span th:text="${app.kzkmeien}" id="familyFirstNameKana">ハナコ</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 罗马字姓名 -->
      <div class="form-group">
        <div class="label">ローマ字名</div>
        <div class="input-group">
          <div class="name-fields">
            <div class="field-row">
              <label for="familyLastNameRoma" class="field-label">姓</label>
              <span th:text="${app.kzkseikn}" id="familyLastNameRoma">山田</span>
            </div>
            <div class="field-row">
              <label for="familyFirstNameRoma" class="field-label">名</label>
              <span th:text="${app.kzkmeikn}" id="familyFirstNameRoma">ハナコ</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 性别选择 -->
      <div class="form-group">
        <div class="label">性別<span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <div class="radio-group">
            <div class="radio-option">
              <span th:if="${app.kzksex == '1'}">男性</span>
              <span th:if="${app.kzksex == '2'}">女性</span>
              <span th:if="${app.kzksex == '9'}">不明</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 勤务先信息 -->
    <div class="section-title"><strong>家族勤務先について</strong></div>
    <div class="form-container">
      <div class="form-group">
        <div class="label">業種<span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <span th:if="${app.kzkgyocd == '101'}">農林水産</span>
          <span th:if="${app.kzkgyocd == '201'}">製造業</span>
          <span th:if="${app.kzkgyocd == '301'}">サービス業</span>
          <span th:if="${app.kzkgyocd == '401'}">小売業</span>
          <span th:if="${app.kzkgyocd == '501'}">金融業</span>
          <span th:if="${app.kzkgyocd == '601'}">商社・卸売業</span>
          <span th:if="${app.kzkgyocd == '901'}">建設業</span>
        </div>
      </div>

      <div class="form-group">
        <div class="label">勤務先名<span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <span th:text="${app.kzkkms}">株式会社</span>
        </div>
      </div>

      <div class="form-group">
        <div class="label">勤務先部署名</div>
        <div class="input-group">
          <span th:text="${app.kzkkmsdep}">第一事業部</span>
        </div>
      </div>

      <div class="form-group">
        <div class="label">勤務先電話</div>
        <div class="input-group">
          <span th:text="${app.kzkkmstel}">03-1111-2222</span>
        </div>
      </div>
    </div>

    <!-- 申请方式选择 -->
    <div class="section-title"><strong>家族情報登録</strong></div>
    <div class="form-container">
      <div class="form-group">
        <div class="label">家族情報登録方法<span><img src="/images/icon_required.png" alt=""></span></div>
        <div class="input-group">
          <div class="radio-group">
            <div class="radio-option">
              <span th:if="${app.kzkhhucd == '1'}">申込店</span>
              <span th:if="${app.kzkhhucd == '2'}">郵送で登録</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
<!--    <div style="text-align: center; margin-top: 20px;">-->
<!--      <button type="button" class="button" style="background-color: #dc3545; margin-right: 10px;" onclick="window.history.back()">戻る</button>-->
<!--      <button type="submit" class="button" style="background-color: #e91e63;">次へ進む</button>-->
<!--    </div>-->
    <div style="text-align: center; margin-top: 20px;">
      <button type="button" class="button-back" onclick="window.history.back()">戻る</button>
      <button type="submit" class="button-next">次へ進む</button>
    </div>
  </form>

  <!-- 版权声明 -->
  <div class="container">
    <p style="text-align: center;">Copyright © H · All Rights Reserved ·</p>
  </div>
</div>
</body>
</html>
